import { defineComponent, watch, ref, type PropType } from 'vue'
interface IStyle {
  color?: string
  fontSize?: string
  backgroundColor?: string // 分类标签背景填充色
  borderColor?: string // 分类标签选中项横线色
  border?: string
  fontWeight?: number
  borderRadius?: string
  padding?: string
}
export default defineComponent({
  props: {
    // 选中项文字样式
    selectText: {
      type: Object as PropType<IStyle>
    },
    // 未选中项文字样式
    text: {
      type: Object as PropType<IStyle>
    }
  },
  setup(props) {
    /** 未选中项文字样式 */
    const textStyle = ref<IStyle>({
      color: '#48494D',
      fontSize: '14px',
      padding: '4px 8px',
      border: '1px solid'
    })
    /** 选中项文字样式 */
    const selectedTextStyle = ref<IStyle>({
      border: '1px solid',
      padding: '4px 8px',
      fontWeight: 500
    })
    const areaList = ['大陆', '港台', '日韩', '欧美']
    watch(
      props,
      () => {
        selectedTextStyle.value = Object.assign(selectedTextStyle.value, props.selectText)
        textStyle.value = Object.assign(textStyle.value, props.text)
      },
      { deep: true, immediate: true }
    )
    return () => (
      <div class="w-full flex items-center justify-between h-8 px-4 bg-white">
        {areaList.map((item, index) => {
          return (
            <span key={index} style={item === '大陆' ? selectedTextStyle.value : textStyle.value}>
              {item}明星
            </span>
          )
        })}
      </div>
    )
  }
})
